<template>
    <!-- 
        当flag的值为true时显示第一个段落
        当flag的值为false时隐藏第一个段落 
    -->
    <p v-show="flag">第一个段落</p>
    <!-- 
        当flag的值为false的时候,显示第二个段落
        当flag的值为true的时候,隐藏第二个段落
        当隐藏元素的时候,虽然元素隐藏了,但是页面已经渲染了该元素
        只是将元素的display属性设置为none
        此处相当于<p style='display:none;'>第二个段落</p>
    -->
    <p v-show="!flag">第二个段落</p>
</template>
<script setup>
import { ref } from 'vue';

const flag = ref(true)
</script>